<template>
  <div class="second-nav">
    <div class="logo">
      <span class="logo-title">合伙人中心</span>
    </div>
    <div class="scroll-box">
      <div id="nav-list" class="nav-list">
        <ul>
          <li v-for="(item, index) in secondMenuCheckList" :key="index">
            <div
              v-if="!item.child && !item.hideInMenu"
              class="item"
              :class="{ 'active-item': item.name == showName }"
              @click="handleNav(item)"
            >
              <img :src="item.icon" alt="" class="menu-icon">
              <span>{{ item.title }}</span>
            </div>
            <div
              v-if="item.child && item.child.length"
              class="item item-parent"
              @click.stop="handleClick"
              :class="{
                'show-child': !isNaN(showIndex) ? showIndex == index : false
              }"
            >
              <img :src="item.icon" alt="" class="menu-icon">
              <span>{{ item.title }}</span>
            </div>
            <div v-show="!isNaN(showIndex) ? showIndex == index : false">
              <ul v-if="item.child && item.child.length">
                <li v-for="(obj, key) in item.child" :key="key">
                  <div
                    v-if="!obj.hideInMenu"
                    class="item child-item"
                    :class="{ 'active-item': obj.name == showName }"
                    @click="handleNav(obj)"
                  >
                    <span>{{ obj.title }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import store from '@/store/index'
import { getCurrentPermission } from '@/api/member'
import { processGrantedMenu } from '@/config/permission'
import { adminInfo,getListMenuNode,roleListMenuNode } from '@/api/member'
export default {
  props: ['show', 'navNum'],
  data() {
    return {
      showList: []
    }
  },
  computed: {
    ...mapState({
      showIndex: state =>
        state.breadCrunbData.groupIndex >= 0
          ? state.breadCrunbData.groupIndex
          : null,
      showName: state =>
        state.breadCrunbData.showName || state.breadCrunbData.name,
      subTitle: state =>
        state.menuList[state.breadCrunbData.pIndex] &&
        state.menuList[state.breadCrunbData.pIndex].secondMenuTitle
    }),
    ...mapGetters(['secondMenuList']),
    ...mapGetters(['permissionData']),
    secondMenuCheckList() {
      
      if (this.permissionData.length === 0) {
        return []
      }
      const list = this.clone(this.secondMenuList)


      processGrantedMenu(list, this.permissionData)
 
      return list
    }
  },
  created() {
    console.log(this.secondMenuList,'menu')
    // const btnArr = []
    // getListMenuNode(sessionStorage.getItem('LOGIN_USERNAME_id')).then(res => {
  
    //   if (res.code === 200) {
    //    let navlist = res.data[0].children
    //     store.dispatch('setPermissionData', navlist)
    //     const btnArr = []
    //     navlist.forEach(item => { // 一级菜单
    //       item.is_bind = true
    //       if (item.children && item.children.length > 0) {
            
            
    //         item.children.forEach(v => { // 二级菜单
    //           v.is_bind = true
    //           if (v.children && v.children.length > 0) {
    //             v.children.forEach(value => { // 操作权限
    //               value.is_bind = true && btnArr.push(value.id)
    //             })
    //           }
    //         })
    //       }
    //     })
    //     console.log(navlist,'66666666666')
    //     localStorage.setItem('BtnIds', btnArr)
    //   }
    // })
    if(sessionStorage.getItem('roleId')){
      roleListMenuNode(sessionStorage.getItem('roleId')).then(res => {
      console.log(res,'菜单')
      if (res.code === 200) {
       let navlist = res.data[0].children
        store.dispatch('setPermissionData', navlist)
        const btnArr = []
        navlist.forEach(item => { // 一级菜单
          item.is_bind = true
          if (item.children && item.children.length > 0) {
            
            
            item.children.forEach(v => { // 二级菜单
              v.is_bind = true
              if (v.children && v.children.length > 0) {
                v.children.forEach(value => { // 操作权限
                  value.is_bind = true && btnArr.push(value.id)
                })
              }
            })
          }
        })
        console.log(navlist,'66666666666')
        localStorage.setItem('BtnIds', btnArr)
      }
    })
    }


    // getCurrentPermission().then(res => {
    //   if (res.code === 10000) {
    //     store.dispatch('setPermissionData', res.data)
    //     const btnArr = []
    //     res.data.forEach(item => { // 一级菜单
    //       if (item.child && item.child.length > 0) {
    //         item.child.forEach(v => { // 二级菜单
    //           if (v.child && v.child.length > 0) {
    //             v.child.forEach(value => { // 操作权限
    //               value.is_bind && btnArr.push(value.id)
    //             })
    //           }
    //         })
    //       }
    //     })
    //     localStorage.setItem('BtnIds', btnArr)
    //   }
    // })
  },
  mounted() {},
  methods: {
    handleClick(e) {
      let itemDom = e.target
      let lastDom = null
      if (e.target.nodeName == 'SPAN') {
        itemDom = e.target.parentElement
      }
      lastDom = itemDom.nextElementSibling
      let className = itemDom.className.split(' ')
      if (lastDom.style.display != 'none') {
        lastDom.style.display = 'none'
        if (className.indexOf('show-child') > -1) {
          className.splice(className.indexOf('show-child'), 1)
        }
      } else {
        lastDom.style.display = 'block'
        if (className.indexOf('show-child') == -1) {
          className.push('show-child')
        }
      }
      itemDom.className = className.join(' ')
    },
    hideSecond() {
      this.$emit('hideSecond')
    },
    handleNav(item) {
      this.$router.push(item.path)
    },
    // 深拷贝方法
    clone(target) {
      if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {}
        for (const key in target) {
          cloneTarget[key] = this.clone(target[key])
        }
        return cloneTarget
      } else {
        return target
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';
.second-nav {
  height: 100%;
  width: 100%;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  color: #ddd;
  background-color: #001529;
  .menu-icon {
    margin-right: 9px;
    width: 20px;
    height: 20px;
  }
  .logo {
    font-weight: bold;
    height: 64px;
    width: 100%;
    padding: 21px 23px;
    overflow: hidden;
    text-align: center;
    .logo-img {
      width: 27px;
      height: 27px;
      vertical-align: middle;
      margin-right: 9px;
    }
    .logo-title {
      vertical-align: middle;
    }
  }
  .scroll-box {
    width: 160px;
    overflow-y: auto;
    position: absolute;
    left: 0;
  }
  .nav-title {
    height: 64px;
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    line-height: 64px;
    font-size: 20px;
    font-weight: bold;
    color: #ddd;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-list {
    width: 160px;
  }
  .item {
    user-select: none;
    line-height: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    font-weight: bold;
    font-size: 14px;
    color: #ddd;
    // justify-content: center;
    padding-left: 28px;
    align-items: center;
    &:hover {
      font-weight: bold;
      background: rgba(21,125,219,0.1);
    }
  }
  .child-item {
    font-weight: normal;
    padding-left: 51px;
  }
  .active-item {
    background: #2361F1;
    position: relative;
    &:hover {
      background: #2361F1;
    }
  }
  .item-parent {
    position: relative;
    &:hover {
      background: rgba(21,125,219,0.1);
    }
    &:after {
      content: '';
      width: 6px;
      height: 6px;
      border-left: 1px solid #fff;
      border-top: 1px solid #fff;
      transform: translateY(-50%) rotate(135deg);
      position: absolute;
      top: 50%;
      right: 16px;
    }
  }
  .show-child {
    &:after {
      transform: translateY(-4px) rotate(-135deg);
    }
  }
  .nav-i-b {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: fixed;
    top: 94px;
    left: 160px;
    z-index: 1;
    transition: 0.3s;
  }
  .nav-i-b-f {
    width: 54px;
    height: 54px;
    background: #fff;
    box-shadow: 0 5px 13px 0 rgba(37, 36, 36, 0.1);
    border-radius: 0 4px 4px 0;
    top: 77px;
    left: 0;
    .nav-icon {
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
  }
  .nav-icon {
    position: absolute;
    top: 50%;
    transition: all 0.1s;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
    font-size: 20px;
  }
}
</style>
